import React, {useState} from 'react';
import {Button, message, Modal, Progress, Space, Typography} from 'antd';
import {SyncOutlined} from '@ant-design/icons';

const {Text, Title} = Typography;

interface VersionUpdateProps {
    visible: boolean;
    currentVersion: string;
    latestVersion: string;
    onUpdate: () => void;
    onCancel: () => void;
}

const VersionUpdate: React.FC<VersionUpdateProps> = ({
                                                         visible,
                                                         currentVersion,
                                                         latestVersion,
                                                         onUpdate,
                                                         onCancel,
                                                     }) => {
    const [updating, setUpdating] = useState(false);
    const [progress, setProgress] = useState(0);

    const handleUpdate = async () => {
        setUpdating(true);
        setProgress(0);

        // 模拟更新进度
        const timer = setInterval(() => {
            setProgress((prev) => {
                if (prev >= 100) {
                    clearInterval(timer);
                    return 100;
                }
                return prev + 10;
            });
        }, 200);

        try {
            // 等待更新完成
            await new Promise((resolve) => setTimeout(resolve, 2000));
            onUpdate();
        } catch (error) {
            message.error('更新失败，请重试');
        } finally {
            clearInterval(timer);
            setUpdating(false);
        }
    };

    return (
        <Modal
            title={<Title level={4} style={{margin: 0}}>发现新版本</Title>}
            open={visible}
            onCancel={onCancel}
            footer={null}
            maskClosable={false}
            closable={!updating}
            width={360}
        >
            <Space direction="vertical" style={{width: '100%'}} size="large">
                <div style={{padding: '8px 0'}}>
                    <Space direction="vertical" size="middle" style={{width: '100%'}}>
                        <div>
                            <Text strong style={{fontSize: '18px'}}>当前版本：</Text>
                            <Text style={{fontSize: '18px', marginLeft: '8px'}}>{currentVersion}</Text>
                        </div>
                        <div>
                            <Text strong style={{fontSize: '18px', color: '#1890ff'}}>最新版本：</Text>
                            <Text style={{fontSize: '18px', marginLeft: '8px', color: '#1890ff'}}>{latestVersion}</Text>
                        </div>
                    </Space>
                </div>

                {updating ? (
                    <Space direction="vertical" style={{width: '100%'}} size="middle">
                        <Progress percent={progress} status="active" strokeWidth={8}/>
                        <Text type="secondary" style={{fontSize: '14px', textAlign: 'center', display: 'block'}}>
                            正在更新中，请稍候...
                        </Text>
                    </Space>
                ) : (
                    <Space style={{width: '100%', justifyContent: 'center'}}>
                        <Button
                            type="primary"
                            icon={<SyncOutlined/>}
                            onClick={handleUpdate}
                            loading={updating}
                            size="large"
                            style={{minWidth: '120px'}}
                        >
                            立即更新
                        </Button>
                        <Button
                            onClick={onCancel}
                            size="large"
                            style={{minWidth: '120px'}}
                        >
                            稍后再说
                        </Button>
                    </Space>
                )}
            </Space>
        </Modal>
    );
};

export default VersionUpdate;